import React, { Component } from 'react';
import { Modal, Button } from 'antd';
import Draggable from 'react-draggable';


export default class DragModal extends Component {

    state = {
        visible: false,
        disabled: true,
        bounds: { left: 0, top: 0, bottom: 0, right: 0 },
    };

    draggleRef = React.createRef();

    handleOk = e => {
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window?.document?.documentElement;
        const targetRect = this.draggleRef?.current?.getBoundingClientRect();
        this.setState({
            bounds: {
                left: -targetRect?.left + uiData?.x,
                right: clientWidth - (targetRect?.right - uiData?.x),
                top: -targetRect?.top + uiData?.y,
                bottom: clientHeight - (targetRect?.bottom - uiData?.y),
            },
        });
    };

    render() {
        const { bounds, disabled } = this.state, { visible, title, children, onOk, onCancel, footer, width } = this.props;
        let footers = footer === false ? { footer: false } : footer ? { footer } : {};
        return (
            <Modal
                title={
                    <div
                        style={{
                            width: '100%',
                            cursor: 'move',
                        }}
                        onMouseOver={() => {
                            if (disabled) {
                                this.setState({
                                    disabled: false,
                                });
                            }
                        }}
                        onMouseOut={() => {
                            this.setState({
                                disabled: true,
                            });
                        }}
                        // fix eslintjsx-a11y/mouse-events-have-key-events
                        // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
                        onFocus={() => { }}
                        onBlur={() => { }}
                    // end
                    >
                        {title}
                    </div>
                }
                width={width || "auto"}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                modalRender={modal => (
                    <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => this.onStart(event, uiData)}
                    >
                        <div ref={this.draggleRef}>{modal}</div>
                    </Draggable>
                )}
                {...footers}
                destroyOnClose={true}
            >
                {visible ? children : null}
            </Modal>
        );
    }
}
